<template>
    <van-form>
        <h2 class="form-group-label" style="margin-top: 16px">
            基本配置
        </h2>
        <van-field
                v-model="data.text"
                label="按钮文字"
                :rules="[{ required: true, message: '请填写按钮文字' }]"
        />
        <h2  class="form-group-label">
            背景色选择
        </h2>
        <van-field
                style="overflow: visible; z-index: 999;"
                label="颜色"
        >
            <template #input>
                <colorPicker v-model="data.style.backgroundColor" />
            </template>
        </van-field>
        <van-field label="类型">
            <template #input>
                <van-radio-group v-model="data.style.isRound" direction="horizontal">
                    <van-radio name="true">圆角</van-radio>
                    <van-radio name="false">方角</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field label="大小">
            <template #input>
                <van-radio-group v-model="data.style.size" direction="horizontal">
                    <van-radio name="large" style="margin-bottom: 8px">大号</van-radio>
                    <van-radio name="normal" style="margin-bottom: 8px">正常</van-radio>
                    <van-radio name="small" style="margin-bottom: 8px">小型</van-radio>
                    <van-radio name="mini">迷你</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field label="宽度">
            <template #input>
                <van-slider bar-height="2px" v-model="data.style.width" :min="20" :max="100" />
            </template>
        </van-field>
        <Del :id="data.id"></Del>
    </van-form>
</template>

<style>
    .form-button-config-color-section{
        width: 100%;
        height: 100%;
        position: absolute
    }
</style>

<script>
    import Del from './../../common/del'

    export default {
        components: {
            Del,
        },
        computed: {

        },
        data() {
            return {

            }
        },
        props: {
            data: Object
        },
        methods : {

        }
    }
</script>